<template>
  <div class="content">
    <div class="left">
      <div class="top">
        <el-row class="nav-title">
          <el-col :span="20">
            <i class="el-icon-files"></i>我的游记
          </el-col>
          <el-col :span="4">
            <el-button type="text" class="more" @click="toBlog">更多>></el-button>
          </el-col>
        </el-row>
        <div id="article-list">
          <!-- 游记列表... -->
          <div :class="{ article_item: true, with_cover: item.cover != null }" v-for="item in tableArticle"
            :key="item.article_id">
            <div class="title" @click="to_detail(item)">{{ item.title }}</div>
            <div class="abstract">{{ item.abstract }}</div>
            <div class="info">
              <span class="user-name">{{ item.user_all.user_name }}</span>
              <div class="footer-divider"></div>
              <span class="view">
                <i class="iconfont icon-liulan" />
                {{ item.views }}
              </span>
              <span>
                <i class="iconfont icon-dianzan-line" />
                {{ item.num_like.num }}
              </span>
              <span>
                <i class="iconfont icon-shoucang-line" />
                {{ item.num_collect.num }}
              </span>
              <span class="subject" v-if="item.article_subject != null">{{ item.article_subject.name }}</span>

            </div>
            <div class="cover" v-if="item.cover != null">
              <el-image style="width: 114px; height: 90px" :src="item.cover" :fit="'cover'" />
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <el-row class="nav-title">
          <el-col :span="20">
            <i class="el-icon-collection-tag"></i>我的收藏
          </el-col>
          <el-col :span="4">
            <el-button type="text" class="more" @click="toCollection">更多>></el-button>
          </el-col>
        </el-row>
        <div id="scenery-list" v-loading="tableLoading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(34, 52, 87, 0.6)">
          <!-- 景点收藏列表... -->
          <div :class="{ scenery_item: true, with_cover: item.img != null }" v-for="item in tableCollect" :key="item.FID">
            <div class="title" @click="toDetail(item)">{{ item.name }}</div>
            <div class="abstract">{{ item.intro }}</div>
            <div class="info">
              <span class="user-name">{{ item.leval }}</span>
              <div class="footer-divider"></div>
              <span class="view">
                <i class="el-icon-position" />
                {{ item.city }}
              </span>
              <span>
                {{ item.region }}
              </span>

            </div>
            <div class="cover" v-if="item.img != null">
              <el-image style="width: 114px; height: 90px" :src="item.img" :fit="'cover'" />
            </div>
          </div>
        </div>
        <el-dialog title="地图" :visible.sync="mapVisible" :v-if="mapVisible" width="60%" @close="closeHandle"
          :append-to-body="true">
          <div id="mapCon"></div>
          <div class="marker"></div>
        </el-dialog>
      </div>

    </div>
    <div class="right">
      <div class="nav-title">
        <el-row>
          <el-col :span="20">
            <i class="el-icon-postcard"></i>个人信息
          </el-col>
          <el-col :span="4">
            <el-button type="text" class="more" @click="toCountControl">修改>></el-button>
          </el-col>
        </el-row>
        <div class="user-info">
          <el-descriptions :column="1">
            <el-descriptions-item label="用户名">{{ user.user_name }}</el-descriptions-item>
            <el-descriptions-item label="UID">{{ user.user_id }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{ user.address }}</el-descriptions-item>
            <el-descriptions-item label="账号类型">
              <el-tag size="small" style="color: rgba(209, 215, 221, 0.8); background-color: rgba(0, 151, 215, 0.8);">
                {{ user.user_role == 1 ? '管理员账号' : '普通账号' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import articleApi from "@/api/article"
import personalApi from "@/api/personal"
import collectApi from '@/api/collect'
import { transformData } from '@/common/map_utils/json_util.js'

//地图相关
var map = null;
var vectorLayer = null;

export default {
  data() {
    return {
      user: {},
      article: [],//用户的所有文章的简要列表
      tableArticle: [],//当前页的文章列表
      subjectList: [], //主题列表
      tk: "fb3eec44ed909be3536962ff90220975", // 天地图密钥
      userCollectId: [],//用户景点收藏id列表
      tableCollectId: [],//当前页显示的景点的id
      tableCollect: [],//当前页面的景点
      tableLoading: true,//加载中
      mapVisible: false,//显示地图对话框
      position_x: 0,
      position_y: 0,
      siteName: ''
    }
  },
  methods: {
    //标题栏跳转
    toBlog() {
      this.$router.push('/personal/showBlog');
    },
    toCollection() {
      this.$router.push('/personal/collection/blogCollection');
    },
    toCountControl() {
      this.$router.push('/personal/changeInfo');
    },
    //文章栏函数
    //获取文章主题列表
    async getSubject() {
      this.subjectList = (await articleApi.getSubject()).data;
    },
    async getUserArticle(state) {
      this.article = await articleApi.getListByUser(state)
      this.totalSize = this.article.data.length
      let begin = 0
      let end = 2 > this.totalSize ? this.totalSize : 2
      this.tableArticle = this.article.data.slice(begin, end)
    },
    //跳转到游记详情界面
    to_detail(item) {
      this.$router.push({
        name: '个人中心-文章详情',
        params: {
          article_id: item.article_id
        }
      })
    },
    //加载用户信息
    load_userInfo() {
      personalApi.getInfo().then(res => {
        this.user = res.data;
      })
    },
    async getUserCollectId() {
      this.userCollectId = (await collectApi.getUserCollect(0)).data;
      this.totalSize = this.userCollectId.length;
      let begin = 0
      let end = this.pageSize > this.totalSize ? this.totalSize : this.pageSize
      this.tableCollectId = this.userCollectId.slice(begin, end)
    },
    searchSite() {
      this.tableLoading = true;
      var queryStruct = new Zondy.Service.QueryFeatureStruct()
      queryStruct.IncludeAttribute = true
      var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/itravel/sfcls/全国景区", {
        resultFormat: 'json',
        struct: queryStruct,
      });
      //查询分页号
      queryParam.pageIndex = 0;
      //设置查询要素数目
      queryParam.recordNumber = 2;

      //查询选项
      var region_option = "";
      for (var i = 0, len = this.tableCollectId.length; i < len; i++) {
        region_option += "id = '" + this.tableCollectId[i].topic_id + "'" + " or ";
      }
      region_option = region_option.slice(0, -4);
      console.log(region_option)
      //属性查询
      queryParam.where = region_option;

      var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
        ip: window.server.GIS_IP,
        port: window.server.GIS_PORT, //访问IGServer的端口号，.net版为6163，Java版为8089
      })
      //执行查询操作，querySuccess为查询回调函数
      queryService.query(this.querySuccess, this.queryError)
    },
    queryError(e) {
      console.log(e);
    },
    querySuccess(result) {
      this.tableLoading = false;
      var data = transformData(result);
      this.tableCollect = data;
    },
    toDetail(item) {
      //地图中心点
      this.position_x = parseFloat(item.longitude)
      this.position_y = parseFloat(item.latitude)
      const center = ol.proj.fromLonLat([this.position_x, this.position_y])
      this.siteName = item.name
      //map.addLayer(vectorLayer);

      this.mapVisible = true
      // 后加载地图
      setTimeout(() => {
        this.initMap();
        map.getView().setCenter(center)
        this.createIconFeature(center)
      }, 0);

    },
    initMap() {
      this.initMapCon();
    },
    initMapCon() {
      if (!map) {
        map = new ol.Map({
          target: "mapCon",
          view: new ol.View({
            projection: ol.proj.get("EPSG:3857"), //默认为 3857
            //center: [this.position_x, this.position_y],
            center: ol.proj.fromLonLat([this.position_x, this.position_y]),
            minZoom: 10,
            zoom: 12,
          }),
          layers: [
            new ol.layer.Tile({
              name: "天地图矢量层",
              source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + this.tk,
                wrapX: false,
              })
            }),
            new ol.layer.Tile({
              name: "矢量标注层",
              source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + this.tk,
                wrapX: false,
              })
            })
          ]
        });
      }
    },
    createIconFeature(center) {
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(center),
      });
      iconFeature.setStyle(this.createLabelStyle(iconFeature));
      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });
      vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });
      map.addLayer(vectorLayer)
    },
    createLabelStyle(feature) {
      return new ol.style.Style({
        image: new ol.style.Icon(({
          src: require('../../../assets/marker/site.png'),
          opacity: 1,
          scale: 1
        })),
        text: new ol.style.Text({
          //位置
          offsetY: 28,
          textAlign: 'center',
          //基准线
          textBaseline: 'middle',
          //文字样式
          font: 'bold 15px 微软雅黑',
          text: this.siteName,
          fill: new ol.style.Fill({ color: '#223458' }),
          stroke: new ol.style.Stroke({ color: '#EBEBEB', width: 2 })
        })
      })
    },
    closeHandle() {
      map.removeLayer(vectorLayer)
    },

    async init() {
      await this.load_userInfo();
      await this.getUserArticle(0);
      await this.getUserCollectId();
      await this.searchSite();
    }
  },
  mounted() {
    this.init();
  }
}

</script>

<style scoped lang='scss'>
.content {
  height: 728px;
  background-color: rgba(34, 52, 87, 0.6);
}

.left {
  width: 66%;
  height: 96%;
  margin: 2%;
  float: left;

  .top {
    margin-top: -2%;
    width: 96%;
    height: 46%;
    background-color: rgba(34, 52, 87, 1);
  }

  .bottom {
    margin-top: 0%;
    width: 96%;
    height: 46%;
    background-color: rgba(34, 52, 87, 1);
  }
}

.right {
  width: 26%;
  height: 90%;
  margin: 2%;
  float: right;
  background-color: rgba(34, 52, 87, 1);
}

.nav-title {
  padding: 4%;
  font-size: 20px;
  margin: 2%;
  padding-bottom: 0%;
  margin-bottom: 0%;
}

.more {
  float: right;
  margin: 2%;
  padding: 2%;
  padding-right: 4%;
}

/* 文章列表样式 */
#article-list {
  height: 350px;
  width: 800px;
  padding: 16px 32px;
  background-color: rgba(34, 52, 87, 0.3);
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  margin: auto;
  margin-top: 0px;
  padding-top: 0px;
}

.article_item {
  position: relative;
  height: 120px;
  padding: 16px 20px 0;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Arial !important;

  .title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    letter-spacing: 1.5px;
    color: rgba(26, 143, 204, 1);
  }

  .abstract {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #b0c4de;
  }

  .info {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #b0c4de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(228, 230, 235, 0.5);

    .user-name {
      color: #5fa6c3;
    }

    .footer-divider {
      display: inline-block;
      width: 1px;
      height: 12px;
      background-color: #e4e6eb;
      margin: 4px 8px 0 8px;
    }

    .like {
      margin-left: 4px;
    }

    .collect {
      margin-left: 4px;
    }

    .subject {
      float: right;
      color: rgba(209, 215, 221, 0.8);
      letter-spacing: 1px;
      background-color: rgba(0, 151, 215, 0.8);
      padding: 0 6px;
      margin-top: 2px;
      border-radius: 2px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      min-height: 21px;
      line-height: 21px;
    }
  }

  .cover {
    position: absolute;
    top: 16px;
    right: 20px;

    img {
      display: inline;
      flex: 0 0 auto;
      width: 114px;
      height: 90px;
      margin-left: 24px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid rgba(26, 160, 221, 0.5);
      overflow-clip-margin: content-box;
      overflow: clip;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
}

.with_cover {

  .title,
  .abstract,
  .info {
    padding-right: 160px !important;
  }
}

.user-info {
  margin: 4%;
}

#scenery-list {
  height: 260px;
  width: 800px;
  padding: 16px 32px;
  background-color: rgba(34, 52, 87, 0.3);
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  margin: auto;
  margin-top: 0px;
  padding-top: 0px;
}

.scenery_item {
  position: relative;
  height: 120px;
  padding: 16px 20px 0;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Arial !important;

  .title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    letter-spacing: 1.5px;
    color: rgba(26, 143, 204, 1);
  }

  .abstract {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #b0c4de;
  }

  .info {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #b0c4de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(228, 230, 235, 0.5);

    .user-name {
      color: #5fa6c3;
    }

    .footer-divider {
      display: inline-block;
      width: 1px;
      height: 12px;
      background-color: #e4e6eb;
      margin: 4px 8px 0 8px;
    }

    .like {
      margin-left: 4px;
    }

    .collect {
      margin-left: 4px;
    }

    .subject {
      float: right;
      color: rgba(209, 215, 221, 0.8);
      letter-spacing: 1px;
      background-color: rgba(0, 151, 215, 0.8);
      padding: 0 6px;
      margin-top: 2px;
      border-radius: 2px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      min-height: 21px;
      line-height: 21px;
    }
  }

  .cover {
    position: absolute;
    top: 16px;
    right: 20px;

    img {
      display: inline;
      flex: 0 0 auto;
      width: 114px;
      height: 90px;
      margin-left: 24px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid rgba(26, 160, 221, 0.5);
      overflow-clip-margin: content-box;
      overflow: clip;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
}

.with_cover {

  .title,
  .abstract,
  .info {
    padding-right: 160px !important;
  }
}

.user-info {
  margin-top: 10%;
}
</style>